<template>
	<view style="width: 90%;margin: 0 auto;position: relative;">
		<view style="height: 20rpx;"></view>
		<view style="display: flex;justify-content: space-between;align-items: center;">
			<view style="font-size: 30rpx;font-weight: 500;">广告收益</view>
			<u-switch activeColor="#f56c6c" :disabled="disabled" v-model="value" @change="change"></u-switch>
		</view>
		<view style="height: 20rpx;"></view>
		<map id="myMap" style="width: 100%; height: 300px;" :enable-satellite="vxshow" :latitude="arrdata.latitude"
			:longitude="arrdata.longitude" :markers="markers" :circles="circles" show-location :scale="scale"></map>
		<view @click="isdiad"
			style="width: 90rpx;height: 110rpx;border-radius: 20rpx;background-color: #fff;position: absolute;right: 32rpx;top: 530rpx;z-index: 99;">
			<view v-if="!vxshow"
				style="display: flex;align-items: center;font-size: 24rpx;flex-direction: column;color: #333;margin-top: 6rpx;">
				<image style="width:60rpx;height:60rpx" src="../../static/wx.png"></image>
				<view>卫星图</view>
			</view>
			<view v-else
				style="display: flex;align-items: center;justify-content: center;font-size: 24rpx;flex-direction: column;color: #333;margin-top: 6rpx;">
				<image style="width:60rpx;height:60rpx" src="../../static/biaozhun.png"></image>
				<view>标准图</view>
			</view>

		</view>
		<!-- <view class="btn-area">
		  <button :disabled="!mapContext" type="primary" @tap="createMapContext">创建 map 上下文 mapContext 对象</button>
		</view> :enable-satellite="true" -->
		<view @click="pupshow=true" style="color: #333;font-size: 28rpx;margin-top: 20rpx;">锚点名称【作品中显示的位置名称】<text
				style="color: #2979ff;">（点击查看详情）</text></view>
		<view style="display: flex;align-content: center;justify-content: space-between;">
			<input type="text"
				style="background: #fff;height: 80rpx;width: 100%;border-radius: 20rpx;font-size: 28rpx;padding-left: 20rpx;color: #333;"
				v-model="arrdata.title" />
		</view>
		<view style="color: #333;font-size: 28rpx;margin-top: 20rpx;">管理名称【仅自己可见，便于后台管理】</view>
		<view style="display: flex;align-content: center;justify-content: space-between;margin-bottom: 20rpx;">
			<input type="text"
				style="background: #fff;height: 80rpx;width: 100%;border-radius: 20rpx;font-size: 28rpx;padding-left: 20rpx;color: #333;"
				v-model="arrdata.name" />
		</view>
		<u-button @click="add" :customStyle="btnGetCodes" color="#f56c6c">保存</u-button>
		<view @click="addcity"
			style="display: flex;align-content: center;justify-content: space-between;margin-top: 20rpx;position: relative;">
			<u-textarea type="text"
				style="background: #fff;width: 680rpx;border-radius: 20rpx;font-size: 28rpx;padding-left: 20rpx;color: #333;padding-right: 40rpx;"
				border="none" autoHeight v-model="arrdata.address" />
			<view style="position: absolute;right:4px ;top: 8rpx;">
				<u-icon name="map" color="#333" size="28"></u-icon>
			</view>
		</view>
		<view style="margin: 20rpx 0;">
			<u-button color="#f56c6c" open-type="share" data-channel="video" :customStyle="btnGetCode">拍抖音</u-button>
			<!-- <u-button color="#f56c6c" @click="click">测试</u-button> -->
			<view style="height: 20rpx;"></view>
			<u-button color="#f56c6c" @click="nass" :customStyle="btnGetCode">查看位置详情界面</u-button>
			<view style="font-size: 28rpx ;color: #333;margin: 20rpx 0;">说明:第二天晚上12点左右结算前一天收益</view>
			<view
				style="display: flex;justify-content: space-between;font-size: 28rpx;color: #333;align-items: center;">
				<view>汇总</view>
				<view style="display: flex;align-items: center;justify-content: center;">
					<view
						style="width: 200rpx;display: flex;align-items: center;flex-direction: column;height: 80rpx;justify-content: space-between;">
						<view>完播</view>
						<view style="color: red;">{{arrdata.num}}</view>
					</view>
					<view
						style="width: 200rpx;display: flex;align-items: center;flex-direction: column;height: 80rpx;justify-content: space-between;">
						<view>昨日收益</view>
						<view style="color: red;">{{arrdata.price?arrdata.price.toFixed(2):0}}</view>
					</view>
					<view
						style="width: 200rpx;display: flex;align-items: center;flex-direction: column;height: 80rpx;justify-content: space-between;">
						<view>总收益</view>
						<view style="color: red;">{{arrdata.wholeprice?arrdata.wholeprice.toFixed(2):0}}</view>
					</view>
				</view>
			</view>
			<view style="height: 80rpx;"></view>
		</view>
		<u-popup :show="pupshow" mode="center" @close="pupshow=false" round="20rpx">
			<view style="padding: 20rpx;">
				<image style="width: 460rpx;height: 360rpx;" src="../../static/166.jpg"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pupshow: false,
				vxshow: false,
				id: null,
				list1: [{
						id: 0,
						text: '完播',
						price: 0
					},
					{
						id: 1,
						text: '昨日收益',
						price: 0
					},
					{
						id: 2,
						text: '总收益',
						price: 0
					}
				],
				value: false,
				btnGetCode: {
					borderRadius: ' 20rpx',
				},
				btnGetCodes: {
					width: '100%',
					height: '80rpx',
					borderRadius: ' 20rpx',
					opacity: '1',
				},
				markers: [

				],
				circles: [{
					latitude: null,
					longitude: null,
					radius: 100,
				}],
				scale: 15,
				mapContext: null,
				arrdata: {},
				id: null,
				userform: {},
				disabled: false
			}
		},
		onShareAppMessage(shareOption) {
			console.log(shareOption);
			return {
				channel: "video",
				extra: {
					withVideoId: true,
				},
				title: this.arrdata.title,
				path: "pages/map/map?id=" + this.arrdata._id,
				success: (res) => {
					uni.showToast({
						title: '发布成功'
					})
					setTimeout(async () => {
						this.getVideoInfo(res.videoId)
					}, 5000)

				},
			};
		},
		async onUploadDouyinVideo(uploadOptions) {
			// 通过 uploadOptions 可以拿到 button target 上的一些信息
			// 如这里的 demo 可以拿到 id: "1"，hello: "world"
			console.log("onUploadDouyinVideoOptions: ", uploadOptions);

			// 可以利用异步能力配合其他 API 获取必要的字段信息
			const videoPath = await this.chooseVideo();
			console.log("videoPath:", videoPath);
			// 返回值（文档中称之为 uploadParams）将被当作发布参数传入视频发布器，发布视频
			return {
				videoPath,
				extra: {
					anchor: {
						anchorType: "app",
						title: this.arrdata.title,
						path: "pages/map/map?id=" + this.arrdata._id,
					},
				},
				success: function(callback) {
					// 只有当发布成功且挂载成功时，success callback 才会有 videoId
					console.log("success: ", callback);
					if (callback.errMsg == 'uploadDouyinVideo:ok') {
						uni.showToast({
							title: '发布成功'
						})
					}
				},
				fail: function(callback) {
					console.log("fail: ", callback);
				},
				complete: function(callback) {
					console.log("complete: ", callback);
				},
			};
		},
		created() {
			this.createMapContext()

		},
		onLoad(opents) {
			this.id = opents.id
			this.getcahlist()
			this.getUser()
		},
		methods: {
			async getVideoInfo(id) {
				const {
					data: res
				} = await this.$http.post('/nav/updatelists', {
					id: this.arrdata._id,
					videoId: id
				})
			},
			async getUser() {
				const {
					data: res
				} = await this.$http.post('/nav/getUser', {})
				if (res.errCode == 200) {
					this.userform = res.data
				}

			},
			chooseVideo() {
				return new Promise((resolve) => {
					tt.chooseVideo({
						sourceType: ["album", "camera"],
						compressed: true,
						success: (res) => {
							resolve(res.tempFilePath);
						},
						fail: (err) => {
							let errType = err.errMsg.includes("chooseVideo:fail cancel") ?
								"取消选择" :
								"选择失败";
							tt.showModal({
								title: errType,
								content: err.errMsg,
								showCancel: false,
							});
							resolve("");
						},
					});
				});
			},
			nass() {
				uni.navigateTo({
					url: '/pages/map/map?id=' + this.arrdata._id
				})
			},
			isdiad() {
				this.vxshow = !this.vxshow
			},
			async getcahlist() {
				const {
					data: res
				} = await this.$http.post('/nav/cahlist', {
					id: this.id
				})
				if (res.errCode == 200) {
					this.arrdata = res.data
					this.id = this.arrdata._id
					if (this.arrdata.stare == 1 || this.arrdata.state == 2) {
						this.value = true
						// this.disabled=true
					}
					this.markers.push(this.arrdata)
					this.circles[0].latitude = res.data.longitude
					this.circles[0].longitude = res.data.longitude
				}
			},
			change(e) {
				console.log('change', e);
				if (this.userform.state != 1) {
					this.value = false
					uni.showModal({
						title: '提示',
						content: '您暂未入驻钓钓宝，需要您入驻联系客服才能开启广告功能和收益！',
						success: (res) => {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/index/index'
								})
							} else if (res.cancel) {
								console.log(this.value, '用户点击取消');
							}
						}
					});
					return
				}
				this.value = e
			},
			addcity() {
				tt.chooseLocation({
					success: (res) => {
						this.arrdata = {
							_id: this.id,
							name: res.name,
							title: "查看此位置",
							address: res.address,
							latitude: res.latitude,
							longitude: res.longitude
						}
						console.log(this.arrdata)
						this.markers[0] = res
						this.markers[0].title = res.name
						this.circles[0].latitude = res.longitude
						this.circles[0].longitude = res.longitude
					}
				})
			},
			add() {
				if (!this.arrdata.title) {
					uni.showToast({
						icon: 'error',
						title: '您还没添加'
					})
					return
				}
				if (!this.arrdata.address) {
					uni.showToast({
						icon: 'error',
						title: '您还没添加'
					})
					return
				}
				delete this.arrdata.errMsg
				if (this.value) {
					this.arrdata.stare = 1
				} else {
					this.arrdata.stare = 0
				}
				uni.showModal({
					title: '提示',
					content: '确认修改吗？',
					success: async (res) => {
						if (res.confirm) {
							const {
								data: res
							} = await this.$http.post('/nav/updatelist', this.arrdata)
							if (res.errCode == 200) {
								uni.showToast({
									title: '修改成功',
									success: () => {
										this.show = true
										setTimeout(() => {
											uni.navigateBack()
										}, 500)
									}
								})
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			createMapContext() {
				if (this.mapContext) {
					return
				}
				// API调用需传入 mapId(map 组件的 id)
				const mapCtx = tt.createMapContext("myMap");
				this.mapContext = mapCtx
				console.log('地图上下文::', this.mapContext);
				// mapCtx && tt.showToast({
				//       title: '创建成功'
				// });
			}

		}
	}
</script>

<style scoped lang="scss">
	// #myMap{
	// 	height: 1600rpx !important;
	// }
</style>